<template>
  <view class="page">
    <slide :HeadReservedHeight="20" :BottomReservedHeight="230">
      <template #bg>
        <map-planning
          width="100vw"
          height="100vh"
          :Config="mapData.Config"
          :startPoi="mapData.startPoi"
          :wayPoi="mapData.wayPoi"
          :endPoi="mapData.endPoi"
          :customMarker="customMarker"
          :scale="13"
        ></map-planning>
      </template>
      <template #content>
        <delivery-order-component
          :deliveryOrder="deliveryOrderDetail!"
          v-if="deliveryOrderDetail != null"
          :only-read="true"
        ></delivery-order-component>
        <view class="info-block">
          <span class="title">订单详情</span>
          <view class="info">
            <view class="info-item">
              <span>订单编号</span>
              <span>
                {{ deliveryOrderDetail?.id }}
                <text-click-copy :text="deliveryOrderDetail?.id">
                  <uni-icons custom-prefix="iconfont" type="icon-copy" size="20"></uni-icons>
                </text-click-copy>
              </span>
            </view>
            <view class="info-item">
              <span>下单时间</span>
              <span>{{ deliveryOrderDetail?.payTime }}</span>
            </view>
          </view>
        </view>
        <view class="info-block">
          <span class="title">菜品列表</span>
          <view class="info">
            <view class="dish-list">
              <view v-for="dish in deliveryOrderDetail?.dishList" :key="dish.id" class="info-item">
                <span
                  >{{ dish.name }}<span v-if="dish.dishFlavor">({{ dish.dishFlavor }})</span>
                  <span class="dish-count"> x{{ dish.count }}</span></span
                >
                <span>￥{{ (dish.specPrice * dish.count).toFixed(1) }}</span>
              </view>
            </view>
            <view class="remark" v-if="deliveryOrderDetail?.remark">备注：{{ deliveryOrderDetail?.remark }}</view>
          </view>
        </view>
      </template>
    </slide>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import MapPlanning from '@/components/map-planning/index.vue'
import type { DeliveryOrderDetailsVO } from '@/types/response/delivery-order'
import Slide from '@/components/slide/index.vue'
import DeliveryOrderComponent from '@/pages/index/components/delivery-order/index.vue'
import TextClickCopy from '@/components/text-click-copy/index.vue'
import { $modal } from '@/plugins'
import { ref } from 'vue'
import $store from '@/store'
import { onBeforeMount } from 'vue'
import type GeoCoordinates from '@/types/generic/GeoCoordinates'
import { DeliveryOrderState } from '@/enum'
import { computed } from 'vue'
import GeoCoordinateUtils from '@/utils/GeoCoordinateUtils'
const query = defineProps({
  deliveryOrderId: {
    type: String,
    require: true
  }
})
const mapData = ref({
  Config: {
    showMarks: true,
    lineColor: '#0606ff', //路径颜色
    lineWidth: 3 //路径宽度
  },
  startPoi: '',
  wayPoi: '',
  endPoi: ''
})

const deliveryOrderDetail = ref<DeliveryOrderDetailsVO>()
onBeforeMount(async () => {
  const riderGeo = await $store.user.geo.refreshAndGet()
  const result = await $API.deliveryOrder.deliveryOrderDetail(query.deliveryOrderId!, riderGeo as GeoCoordinates)
  if (!result.success) {
    $modal.toastErrorMsg(result.message)
    return
  }
  deliveryOrderDetail.value = result.data
  // 设置地图导航信息
  setMapPlanningParams(deliveryOrderDetail.value)
})
// 自定义的marker内容
const customMarker = ref<{ latitude: number; longitude: number; [key: string]: any }[]>([])

async function setMapPlanningParams(deliveryOrderDetail: DeliveryOrderDetailsVO) {
  // 是否待接单
  const isNextStepToShop = computed(() => deliveryOrderDetail.deliveryState < DeliveryOrderState.RIDER_ARRIVED_STORE)

  const riderGeo = await $store.user.geo.refreshAndGet()
  const distanceFromUser = GeoCoordinateUtils.calculateDistance(
    riderGeo.longitude,
    riderGeo.latitude,
    deliveryOrderDetail.consigneeLongitude,
    deliveryOrderDetail.consigneeLatitude
  )
  customMarker.value.push({
    latitude: riderGeo.latitude!,
    longitude: riderGeo.longitude!,
    iconPath: '/static/image/planning/rider-icon.svg',
    callout: {
      content: `距离${isNextStepToShop.value ? '店铺' : '用户'}${(isNextStepToShop.value
        ? deliveryOrderDetail.shopDistance
        : distanceFromUser
      ).toFixed(1)}km`,
      display: 'ALWAYS',
      textAlign: 'center',
      bgColor: '#ff644d',
      padding: '2px'
    }
  })

  customMarker.value.push({
    latitude: deliveryOrderDetail.shopLatitude,
    longitude: deliveryOrderDetail.shopLongitude,
    iconPath: '/static/image/planning/shop.svg'
  })
  customMarker.value.push({
    latitude: deliveryOrderDetail.consigneeLatitude,
    longitude: deliveryOrderDetail.consigneeLongitude!,
    iconPath: '/static/image/planning/user.svg',
    ...{
      callout: isNextStepToShop.value
        ? {
            content: `用户距离店铺${deliveryOrderDetail.shopToUserDistance.toFixed(1)}km`,
            display: 'ALWAYS',
            textAlign: 'center',
            bgColor: '#ff644d',
            padding: '2px'
          }
        : undefined
    }
  })
  mapData.value.startPoi = `${riderGeo.longitude},${riderGeo.latitude}`

  mapData.value.wayPoi = isNextStepToShop.value
    ? `${deliveryOrderDetail.shopLongitude},${deliveryOrderDetail.shopLatitude}`
    : ''
  mapData.value.endPoi = `${deliveryOrderDetail.consigneeLongitude},${deliveryOrderDetail.consigneeLatitude}`
}
</script>

<style scoped lang="scss">
.page {
  width: 100vw;
  height: 100vh;

  .info-block {
    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      line-height: 70rpx;
    }

    .info {
      padding: 0 5rpx;
      box-sizing: border-box;

      .info-item {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        line-height: 70rpx;
      }

      .remark {
        margin-top: 10px;
        padding: 16rpx;
        font-size: 26rpx;
        line-height: 39rpx;
        border-radius: 10rpx;
        color: #7f7f7f;
        background-color: #f7f7f7;
        box-sizing: border-box;
      }
    }
  }
}
</style>
